<template>
	<view class="equipmentNum">
		<view class="Remaining">
			<text>锦鲤算力卡数量</text>
			<text class="greenColor">剩余{{ props.max }}张</text>
		</view>
		<!-- 步进器，后期优化的时候可以封装 -->
		<view class="steep">
			<uni-number-box :min="1" :max="props.max" v-model="steepValue" @change="changeValue" />
			<text style="color: rgba(255, 255, 255, 0.5)">1台/张</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue';
const props = defineProps<{
	value: number;
	max: number;
}>();
const emit = defineEmits<{
	(e: 'update:max', data: number): void;
	(e: 'update:value', data: number): void;
}>();
let steepValue = props.value; // 将传过来的值转存一下
let max = props.max;
// 改变输入框里面的值传给父组件
const changeValue = () => {
	emit('update:max', max - steepValue);
	emit('update:value', steepValue);
};
</script>

<style lang="scss" scoped>
::v-deep .uni-numbox {
	display: flex;
}

::v-deep .uni-numbox__minus {
	border-right: none !important;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}

::v-deep .uni-numbox__plus {
	border-left: none !important;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

::v-deep .uni-numbox__minus,
::v-deep .uni-numbox__plus,
::v-deep .uni-numbox__value {
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid gray;
	color: gray;
	margin: 0;
}

::v-deep .uni-numbox-btns {
	background-color: #878888 !important;
	color: #fff;
}

.equipmentNum {
	width: 91%;
	margin: 40px auto 0 auto;
	color: #fff;
	font-size: 24px;

	.Remaining {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 0 16px 0;

		.greenColor {
			color: rgba(0, 208, 185, 1);
		}
	}

	.steep {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		--van-stepper-input-font-size: 28px;
	}
}
</style>
